<template>
    <div class="app">
        <h1>{{msg}}</h1>
        <School/>
        <Student/>
    </div>
</template>

<script>
// 注意，如果组件中的 style 的样式属性同名，后引用的样式会覆盖前面引用的
// 引入Student
import Student from './components/Student.vue'
// 引入School
import School from './components/School.vue'
 

export default {
    name:'App',
    components:{
        Student,
        School,
    }, 
    data() {
        return {
            msg :'你好啊！',
        }
    },
}
</script> 

<!-- 
    尤其注意：在App组件中的样式，如果没有写 scoped ，会导致所有子组件的相同样式与之冲突
    lang：指定当前组件使用的样式语言（默认css）
 -->
<style scoped lang="css">
    .app{
        background-color:gray;
        padding: 2px;
    }
</style>
 